<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户注册</title>
</head>
<body>
<form autocomplete="off">
    姓名：<input type="text" id="username">
    <span id="uSpan"></span>
    <br>
    密码：<input type="password" id="password">
    <br>
    <input type="submit" value="注册">
</form>
</body>
<script src="${pageContext.request.contextPath}/js/jquery-3.3.1.min.js"></script>
<script>
    //设置姓名输入框失去焦点事件
    $("#username").blur(function () {
        //获取到输入的username
        let username = $("#username").val();
        //使用JQ的get方式实现Ajax
        <%--$.get(--%>
        <%--    //请求的资源路径--%>
        <%--    "${pageContext.request.contextPath}/registerServlet",--%>
        <%--    //请求参数--%>
        <%--    "username=" + username,--%>
        <%--    //回调函数--%>
        <%--    function (data) {--%>
        <%--        //将服务器响应的数据显示到span--%>
        <%--        $("#uSpan").html(data);--%>
        <%--    },--%>
        <%--    //响应数据形式--%>
        <%--    "text"--%>
        <%--);--%>


        //使用JQ的通用方式实现Ajax
        $.ajax({
            //请求资源URL路径
            url: "${pageContext.request.contextPath}/registerServlet",
            //是否异步
            async: true,
            //请求参数
            data: "username=" + username,
            //请求方式  get/post
            type: "POST",
            //获取响应数据形式 :  json, xml, html, text
            dataType: "text",
            //请求成功后的回调函数
            success: function (data) {
                $("#uSpan").html(data);
            },
            //失败回调函数
            error: function () {
                alert("操作失败!");
            }
        });


    });
</script>
</html>